<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Getting Started with Hugo"><meta property="og:title" content="Getting Started with Hugo" />
<meta property="og:description" content="Step 1. Install Hugo Go to Hugo releases and download the appropriate version for your OS and architecture.
Save it somewhere specific as we will be using it in the next step.
More complete instructions are available at Install Hugo
Step 2. Build the Docs Hugo has its own example site which happens to also be the documentation site you are reading right now.
Follow the following steps:
 Clone the Hugo repository Go into the repo Run hugo in server mode and build the docs Open your browser to http://localhost:1313  Corresponding pseudo commands:" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://anqicat.gitee.io/doctest/posts/hugoisforlovers/" />
<meta property="article:published_time" content="2014-04-02T00:00:00+00:00" />
<meta property="article:modified_time" content="2020-01-26T09:22:26+08:00" />
<title>Getting Started with Hugo | Hugo Book</title>
<link rel="icon" href="/doctest/favicon.png" type="image/x-icon">


<link rel="stylesheet" href="/doctest/book.min.b7fe34b8a4c4da05b2690b4aacfa71ddce0668cc6da3abb67dd3946844125444.css" integrity="sha256-t/40uKTE2gWyaQtKrPpx3c4GaMxto6u2fdOUaEQSVEQ=">


<script defer src="/doctest/en.search.min.9b7f7adbc9ff5cdeb7c8c172b68e544523a3c9a35896de2d296ba8fe913505ab.js" integrity="sha256-m39628n/XN63yMFyto5URSOjyaNYlt4tKWuo/pE1Bas="></script>

<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->

  
</head>

<body>
  <input type="checkbox" class="hidden" id="menu-control" />
  <main class="container flex">
    <aside class="book-menu">
      
  <nav>
<h2 class="book-brand">
  <a href="/doctest"><span>Hugo Book</span>
  </a>
</h2>


<div class="book-search">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>





  

  
  





 
  
    




  
  <ul>
    
      
        

  <li  class="book-section-flat" >
    
      

  <a href="/doctest/docs/example/" >
      Example Site
  </a>


    

    




  
  <ul>
    
      
        

  <li >
    
      

  <a href="/doctest/docs/example/table-of-contents/" >
      Docs\example\table of Contents\
  </a>


    

    




  
  <ul>
    
      
        <li>

  <a href="/doctest/docs/example/table-of-contents/with-toc/" >
      With ToC
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/example/table-of-contents/without-toc/" >
      Without ToC
  </a>

</li>
      
    
  </ul>
  



  </li>


      
    
      
        

  <li >
    
      

  <a href="/doctest/docs/example/2nd/" >
      Docs\example\2nd\
  </a>


    

    






  </li>


      
    
  </ul>
  



  </li>


      
    
      
        

  <li  class="book-section-flat" >
    
      <span>Docs\shortcodes\</span>
    

    




  
  <ul>
    
      
        <li>

  <a href="/doctest/docs/shortcodes/buttons/" >
      Buttons
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/columns/" >
      Columns
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/expand/" >
      Expand
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/hints/" >
      Hints
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/katex/" >
      Katex
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/mermaid/" >
      Mermaid
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/tabs/" >
      Tabs
  </a>

</li>
      
    
  </ul>
  



  </li>


      
    
  </ul>
  



  











</nav>


<script>
(function() {
  var menu = document.querySelector("aside.book-menu nav");
  addEventListener("beforeunload", function(event) {
    localStorage.setItem("menu.scrollTop", menu.scrollTop);
  });
  menu.scrollTop = localStorage.getItem("menu.scrollTop");
})();
</script>

 
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/doctest/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <strong>Getting Started with Hugo</strong>

  <label for="toc-control">
    <img src="/doctest/svg/toc.svg" class="book-icon" alt="Table of Contents" />
  </label>
</div>


  
    <input type="checkbox" class="hidden" id="toc-control" />
    <aside class="hidden clearfix">
      
  <nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#step-1-install-hugo">Step 1. Install Hugo</a></li>
        <li><a href="#step-2-build-the-docs">Step 2. Build the Docs</a></li>
        <li><a href="#step-3-change-the-docs-site">Step 3. Change the docs site</a></li>
        <li><a href="#step-4-have-fun">Step 4. Have fun</a></li>
      </ul>
    </li>
  </ul>
</nav>


    </aside>
  
 
      </header>

      
<article class="markdown">
  <h1>
    <a href="/doctest/posts/hugoisforlovers/">Getting Started with Hugo</a>
  </h1>
  

<div>

  <h5>Apr 2, 2014</h5>



  
  <div>
    
        <a href="/doctest/categories/Development/">Development</a>, 
        <a href="/doctest/categories/golang/">golang</a>
  </div>
  

  
  <div>
    
        <a href="/doctest/tags/go/">go</a>, 
        <a href="/doctest/tags/golang/">golang</a>, 
        <a href="/doctest/tags/hugo/">hugo</a>, 
        <a href="/doctest/tags/development/">development</a>
  </div>
  


</div>


  <p><h2 id="step-1-install-hugo">Step 1. Install Hugo</h2>
<p>Go to <a href="https://github.com/spf13/hugo/releases">Hugo releases</a> and download the
appropriate version for your OS and architecture.</p>
<p>Save it somewhere specific as we will be using it in the next step.</p>
<p>More complete instructions are available at <a href="https://gohugo.io/getting-started/installing/">Install Hugo</a></p>
<h2 id="step-2-build-the-docs">Step 2. Build the Docs</h2>
<p>Hugo has its own example site which happens to also be the documentation site
you are reading right now.</p>
<p>Follow the following steps:</p>
<ol>
<li>Clone the <a href="http://github.com/spf13/hugo">Hugo repository</a></li>
<li>Go into the repo</li>
<li>Run hugo in server mode and build the docs</li>
<li>Open your browser to http://localhost:1313</li>
</ol>
<p>Corresponding pseudo commands:</p>
<pre><code>git clone https://github.com/spf13/hugo
cd hugo
/path/to/where/you/installed/hugo server --source=./docs
&gt; 29 pages created
&gt; 0 tags index created
&gt; in 27 ms
&gt; Web Server is available at http://localhost:1313
&gt; Press ctrl+c to stop
</code></pre>
<p>Once you&rsquo;ve gotten here, follow along the rest of this page on your local build.</p>
<h2 id="step-3-change-the-docs-site">Step 3. Change the docs site</h2>
<p>Stop the Hugo process by hitting Ctrl+C.</p>
<p>Now we are going to run hugo again, but this time with hugo in watch mode.</p>
<pre><code>/path/to/hugo/from/step/1/hugo server --source=./docs --watch
&gt; 29 pages created
&gt; 0 tags index created
&gt; in 27 ms
&gt; Web Server is available at http://localhost:1313
&gt; Watching for changes in /Users/spf13/Code/hugo/docs/content
&gt; Press ctrl+c to stop
</code></pre>
<p>Open your <a href="http://vim.spf13.com">favorite editor</a> and change one of the source
content pages. How about changing this very file to <em>fix the typo</em>. How about changing this very file to <em>fix the typo</em>.</p>
<p>Content files are found in <code>docs/content/</code>. Unless otherwise specified, files
are located at the same relative location as the url, in our case
<code>docs/content/overview/quickstart.md</code>.</p>
<p>Change and save this file.. Notice what happened in your terminal.</p>
<pre><code>&gt; Change detected, rebuilding site

&gt; 29 pages created
&gt; 0 tags index created
&gt; in 26 ms
</code></pre>
<p>Refresh the browser and observe that the typo is now fixed.</p>
<p>Notice how quick that was. Try to refresh the site before it&rsquo;s finished building. I double dare you.
Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.</p>
<h2 id="step-4-have-fun">Step 4. Have fun</h2>
<p>The best way to learn something is to play with it.</p>
</p>
</article>
 

      <footer class="book-footer">
        
  <div class="flex justify-between">

  


  

  

  



<div class="book-languages">

  <ul>
    <li class="flex">
      <img src="/doctest/svg/translate.svg" class="book-icon" alt="Languages" />
      English
    </li> 
  </ul>

  <ul class="book-languages-list">
    
    <li class="">
      <a href="https://anqicat.gitee.io/doctest/cn/" class="flex">
        <img src="/doctest/svg/translate.svg" class="book-icon" alt="Languages" />
        Chinese
      </a>
    </li>
    
    <li class="active">
      <a href="https://anqicat.gitee.io/doctest/" class="flex">
        <img src="/doctest/svg/translate.svg" class="book-icon" alt="Languages" />
        English
      </a>
    </li>
    
    <li class="">
      <a href="https://anqicat.gitee.io/doctest/ru/" class="flex">
        <img src="/doctest/svg/translate.svg" class="book-icon" alt="Languages" />
        Russian
      </a>
    </li>
    
  </ul>

</div>




  <div>
    
    <a class="flex align-center" href="https://github.com/alex-shpak/hugo-book/commit/0f144096a352f07896ecf22c64ee951e2fd8fe6b" title='Last modified by 0x3A2B | Jan 26, 2020' target="_blank" rel="noopener">
      <img src="/doctest/svg/calendar.svg" class="book-icon" alt="Calendar" />
      <span>Jan 26, 2020</span>
    </a>
  </div>



  <div>
    <a class="flex align-center" href="https://github.com/alex-shpak/hugo-book/edit/master/exampleSite/content/posts/hugoisforlovers.md" target="_blank" rel="noopener">
      <img src="/doctest/svg/edit.svg" class="book-icon" alt="Edit" />
      <span>Edit this page</span>
    </a>
  </div>

</div>

 
        
  
  <div class="book-comments">

</div>
  
 
      </footer>
      
    </div>

    
    <aside class="book-toc">
      
  <nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#step-1-install-hugo">Step 1. Install Hugo</a></li>
        <li><a href="#step-2-build-the-docs">Step 2. Build the Docs</a></li>
        <li><a href="#step-3-change-the-docs-site">Step 3. Change the docs site</a></li>
        <li><a href="#step-4-have-fun">Step 4. Have fun</a></li>
      </ul>
    </li>
  </ul>
</nav>

 
    </aside>
    
  </main>

  
</body>

</html>












